<template>
	<view class="matchmakerDetail">
		<view class="header">
			<view class="left" @click="toBack"><i class="ico"></i></view>
			<view class="right" @click="open"><i class="ico"></i></view>
		</view>
		<view class="user_info">
			<view class="left">
				<image :src="infoList.avatarUrl" class="avatar" mode=""></image>
				<!-- <view class="user_id">工号:21</view> -->
			</view>
			<view class="right">
				<view class="name">
					<view class="name_text">{{infoList.username}}<image :src="infoList.sexCode?'../../static/iconfont/grade11.png':'../../static/iconfont/grade21.png'" mode=""></image></view>
					
					<!-- <view class="sign">旗舰店</view> -->
				</view>
				<!-- <view class="desc">高端婚恋顾问</view> -->
				<view class="data">
					<view class="item">
						<view class="data_text">{{infoList.height}}cm</view>
						<view class="item_text">身高</view>
					</view>
					<view class="item">
						<view class="data_text">{{infoList.weight}}kg</view>
						<view class="item_text">体重</view>
					</view>
					<view class="item">
						<view class="data_text">{{infoList.hunyinState}}</view>
						<view class="item_text">婚史</view>
					</view>
					<!-- <view class="item">
						<view class="data_text">{{infoList[0].workPlace}}</view>
						<view class="item_text">地区</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="conentn">
			<view class="user_desc">善于运用心灵匹配性格相容、价值观接近、关系互动和谐的原则，以专业耐心的服务宗旨，成功牵线无以计数的单身人士， 拥有良好的口碑。</view>
			<view class="floor1">
				<view class="title">
					其它信息
					<text></text>
				</view>
				<view class="content">
					<view class="item">
						<!-- <p class="ico telico"></p> -->
						<view class="text">工作职位  <text> ： </text> <text>{{infoList.career}}</text> </view>
						<!-- <view class="btn">拨打</view> -->
					</view>
					<view class="item">
						<!-- <p class="ico qqico"></p> -->
						<view class="text">联系方式 <text> ： </text> <text>{{infoList.phone}}</text></view>
					</view>
					<view class="item">
						<!-- <p class="ico wxico"></p> -->
						<view class="text">学历 <text> ： </text> <text>{{infoList.xueli}}</text></view>
					</view>
					<view class="item">
						<!-- <p class="ico wxico"></p> -->
						<view class="text">薪资 <text> ： </text> <text>{{infoList.monthIncome}}</text></view>
					</view>
					<view class="item">
						<view class="text">地区 <text> ： </text> <text>{{infoList.workPlace}}</text></view>
					</view>
					<!-- <view class="qrCode">
						<image src="../../static/160749574570d_s.png" mode=""></image>
						<view class="text">长按二维码加红娘微信</view>
					</view> -->
				</view>
			</view>
			<view class="floor2">
				<view class="title">
					留言
					<text></text>
				</view>
				<view class="content">
					<!-- <view class="nothing">
						<i class="ico"></i>
						<view class="text">暂时木有服务评价</view>
					</view> -->
					<textarea class="text_content" id="" cols="30" rows="10" placeholder="我想说两句...请如实评价~~"></textarea>
				<!-- 	<view class="service">
						<view class="label">服务打分：</view>
						<view class="service_content">
							<u-radio-group v-model="radiovalue1" placement="row">
								<u-radio label="好评" :name="1" :customStyle="{marginRight: '16rpx'}"></u-radio>
								<u-radio label="中评" :name="2" :customStyle="{marginRight: '16rpx'}"></u-radio>
								<u-radio label="差评" :name="3" :customStyle="{marginRight: '16rpx'}"></u-radio>
							</u-radio-group>
						</view>
					</view> -->
					<view class="arrow_region"><view class="button">发表留言</view></view>
				</view>
			</view>
		<!-- 	<view class="floor3">
				<view class="title">
					服务案例
					<text></text>
				</view>
				<view class="content">
					<view class="nothing">
						<i class="ico"></i>
						<view class="text">暂时木有服务评价</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="btn_region">
			<view class="item">
				<i class="ico"></i>
				<view class="text">幸福热线</view>
			</view>
			<view class="item">
				<i class="ico"></i>
				<view class="text">咨询客服</view>
			</view>
			<view class="myBtn"><view class="ico"> 我的红娘</view></view>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="top" :round="10">
			<view class="top_region">
				<view class="titles">
					<view class="left">服务大厅</view>
					<view class="right" @click="close">
						<view class="text">关闭</view>
						<i class="ico"></i>
					</view>
				</view>
				<view class="content">
					<view class="item">
						<i class="_index ico"></i>
						<view class="text">首页</view>
					</view>
					<view class="item">
						<i class="_huxuan ico"></i>
						<view class="text">互选</view>
					</view>
					<view class="item">
						<i class="_index ico"></i>
						<view class="text">认证</view>
					</view>
					<view class="item">
						<i class="_tg ico"></i>
						<view class="text">视频</view>
					</view>
					<view class="item">
						<i class="_hb ico">
							
							<b>新</b>
						</i>
						<view class="text">推广</view>
					</view>
					<view class="item">
						<i class="_video ico"></i>
						<view class="text">牵线</view>
					</view>
					<view class="item">
						<i class="_myhn ico"></i>
						<view class="text">活动</view>
					</view>
					<view class="item">
						<i class="_article ico"></i>
						<view class="text">学堂</view>
					</view>
					<view class="item">
						<i class="_vip ico"></i>
						<view class="text">开通VIP</view>
					</view>
					<view class="item">
						<image class="iconImg" src="../../static/photo_s0.png" mode=""></image>
						<view class="text">我的</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			radiovalue1: '',
			show: false,
			id:'',
			infoList:{},
		};
	},
	onLoad() {
		// let id = option.id
		// console.log(id);
		// this.id = id
		// this.getInfo()
		console.log(this.$store.state.userInfo);
		this.infoList = this.$store.state.userInfo
	},
	methods:{
		toBack(){
			uni.navigateBack()
		},
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		},
		// async getInfo(){
		// 	let id = 2
		// 	let res = await this.request({
		// 		url:'/request/select/'+id,
		// 		method:'POST'
		// 	})
		// 	// console.log(res);
		// 	this.infoList = res.filter((item) => {
		// 		return item.id == Number(this.id)
		// 	})
		// 	console.log(this.infoList);
			
			
		// 	var a = this.infoList[0].monthIncome
		// 	switch (a) {
		// 		case 1:
		// 			this.infoList[0].monthIncome = '3千以下';
		// 			break;
		// 		case 2:
		// 			this.infoList[0].monthIncome = '3—5千';
		// 			break;
		// 		case 3:
		// 			this.infoList[0].monthIncome = '5—7千';
		// 			break;
		// 		case 4:
		// 			this.infoList[0].monthIncome = '7—9千';
		// 			break;
		// 		case 5:
		// 			this.infoList[0].monthIncome = '0.9—1.5万';
		// 			break;
		// 		case 6:
		// 			this.infoList[0].monthIncome = '1.5万—2万';
		// 			break;
		// 		case 7:
		// 			this.infoList[0].monthIncome = '2—2.5万';
		// 			break;
		// 		case 8:
		// 			this.infoList[0].monthIncome = '2.5—3万';
		// 			break;
		// 		case 9:
		// 			this.infoList[0].monthIncome = '3—5万';
		// 			break;
		// 		case 10:
		// 			this.infoList[0].monthIncome = '5—10万';
		// 			break;
		// 		case 11:
		// 			this.infoList[0].monthIncome = '10万以上';
		// 			break;
		// 	}
		// 	var b = this.infoList[0].xueli
		// 	switch (b) {
		// 		case 1:
		// 			this.infoList[0].xueli = '初中';
		// 			break;
		// 		case 2:
		// 			this.infoList[0].xueli = '高中';
		// 			break;
		// 		case 3:
		// 			this.infoList[0].xueli = '大专';
		// 			break;
		// 		case 4:
		// 			this.infoList[0].xueli = '本科';
		// 			break;
		// 		case 5:
		// 			this.infoList[0].xueli = '硕士';
		// 			break;
		// 		case 6:
		// 			this.infoList[0].xueli = '博士';
		// 			break;
		// 	}
		// 	var birthday = this.infoList[0].birthday.split(' ')[0]
		// 	// console.log(birthday);
		// 	let age = this.getAge(birthday)
		// 	this.infoList[0].birthday = age
			
		// 	var sex = this.infoList[0].sex
		// 	if(sex == '男'){
		// 		this.infoList[0].sexCode = 1
		// 	}else {
		// 		this.infoList[0].sexCode = ''
		// 	}
			
		// 	console.log(this.infoList);
		// },
		getAge(strAge) {
			var birArr = strAge.split("-");
			var birYear = birArr[0];
			var birMonth = birArr[1];
			var birDay = birArr[2];
			var d = new Date();
			var nowYear = d.getFullYear();
			var nowMonth = d.getMonth() + 1; //记得加1
			var nowDay = d.getDate();
			var returnAge;
			if (birArr == null) {
				return false
			};
			var d = new Date(birYear, birMonth - 1, birDay);
			if (d.getFullYear() == birYear && (d.getMonth() + 1) == birMonth && d.getDate() == birDay) {
				if (nowYear == birYear) {
					returnAge = 0; // 
				} else {
					var ageDiff = nowYear - birYear; // 
					if (ageDiff > 0) {
						if (nowMonth == birMonth) {
							var dayDiff = nowDay - birDay; // 
							if (dayDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						} else {
							var monthDiff = nowMonth - birMonth; // 
							if (monthDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						}
					} else {
						return "出生日期晚于今天，数据有误"; //返回-1 表示出生日期输入错误 晚于今天
					}
				}
				return returnAge;
			} else {
				return ("输入的日期格式错误！");
			}
		},
	}
};
</script>

<style lang="scss" scoped>
	.top_region {
		padding: 0 20rpx 40rpx;
		box-sizing: border-box;
		.titles {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
			box-sizing: border-box;
			align-items: center;
			font-size: 36rpx;
			.left {
			}
			.right {
				display: flex;
				align-items: center;
				
				.text {
					margin-right: 10rpx;
				}
				.ico {
					color: #ff6f6f;
				}
			}
		}
		.content {
			display: flex;
			flex-flow: wrap;
			.item {
				width: 25%;
				display: flex;
				flex-flow: column;
				align-items: center;
				margin: 24rpx 0;
				i {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 36rpx;
					position: relative;
					b {
						position: absolute;
						top: -0.5rem;
						right: -0.5rem;
						min-width: 0.8em;
						height: 0.8em;
						padding: 0.3rem;
						text-align: center;
						line-height: 0.8em;
						font-size: 22rpx;
						background: rgba(251, 92, 92, 0.8);
						font-style: normal;
						color: #fff !important;
						border-radius: 1.2em;
					}
				}
				.iconImg {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				._index {
					background-color: #8addb9;
					background-image: -webkit-linear-gradient(135deg, #ff6f6f, #ffa2a2);
				}
	
				._huxuan {
					background-color: #8addb9;
					background-image: -webkit-linear-gradient(135deg, #43c38b, #8addb9);
				}
	
				._trend {
					background-color: #fd6eba;
					background-image: -webkit-linear-gradient(135deg, #fd6eba, #ffabd8);
				}
	
				._tg {
					background-color: #0dd068;
					background-image: -webkit-linear-gradient(135deg, #0dd068, #77e5aa);
				}
	
				._dating {
					background-color: #ea4c89;
					background-image: -webkit-linear-gradient(135deg, #ea4c89, #ff8eba);
				}
	
				._video {
					background-color: #6dadff;
					background-image: -webkit-linear-gradient(135deg, #6dadff, #b0ccef);
				}
	
				._shop {
					background-color: #ff9966;
					background-image: -webkit-linear-gradient(135deg, #ff9966, #ffd09d);
				}
	
				._hb {
					background-color: #ff604a;
					background-image: -webkit-linear-gradient(135deg, #ff794a, #ffb196);
				}
	
				._hn {
					background-color: #fd5941;
					background-image: -webkit-linear-gradient(135deg, #fd5941, #ff9586);
				}
	
				._myhn {
					background-color: #db7798;
					background-image: -webkit-linear-gradient(135deg, #db7798, #f29db9);
				}
	
				._party {
					background-color: #feb118;
					background-image: -webkit-linear-gradient(135deg, #feb118, #ffca60);
				}
	
				._article {
					background-color: #00d8d9;
					background-image: -webkit-linear-gradient(135deg, #0ebfc0, #9eebeb);
				}
	
				._qun {
					background-color: #d88cff;
					background-image: -webkit-linear-gradient(135deg, #d88cff, #ecc6ff);
					font-size: 2.2rem;
				}
	
				._msg {
					background-color: #4ebdf1;
					background-image: -webkit-linear-gradient(135deg, #4ebdf1, #8fdbff);
				}
	
				._vip {
					background-color: #d86ea3;
					background-image: -webkit-linear-gradient(135deg, #b28850, #d9b686);
				}
			}
		}
	}
.matchmakerDetail {
	padding: 0px 0;
	min-height: 100vh;
	background-color: #fff;
	.header {
		width: 100%;
		height: 44px;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		background-image: url('../../static/my_bg.png');
		background-color: #ff589b;
		// color: #fff;
		font-size: 44rpx;
		background-size: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
	.title {
		padding-top: 20rpx;
		font-size: 40rpx;
		font-weight: bold;
		padding: 20rpx 0;
		display: flex;
		flex-flow: column;
		align-items: center;
		text {
			background-color: #ff589b;
			height: 6rpx;
			width: 40rpx;
			border-radius: 8rpx;
			margin: 10rpx 0;
		}
	}
	.user_info {
		height: 400rpx;
		position: relative;
		border-radius: 25px;
		overflow: hidden;
		display: flex;
		padding: 24rpx;
		box-sizing: border-box;
		&::after {
			background-color: #ff589b;
			width: 200%;
			height: 400rpx;
			position: absolute;
			left: -50%;
			top: 0;
			z-index: 5;
			content: '';
			border-radius: 0 0 50% 50%;
			background-size: 50%;
		}
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 400rpx;
			z-index: 6;
			overflow: hidden;
			background-size: 100%;
			background-image: url('../../static/my_bg.png');
		}
		.left {
			position: relative;
			z-index: 8;
			margin-right: 20rpx;
			.avatar {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
			.user_id {
				position: absolute;
				background-color: #fff;
				position: absolute;
				width: 156rpx;
				line-height: 44rpx;
				top: 150rpx;
				left: 15rpx;
				font-size: 24rpx;
				border-radius: 40rpx;
				color: #666;
				background-image: -webkit-linear-gradient(left, #ccc, #eee, #ccc);
				border: rgba(255, 255, 255, 0.5) 2rpx solid;
				text-align: center;
			}
		}
		.right {
			position: relative;
			z-index: 8;
			flex: 1;
			color: #fff;
			.name {
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				.name_text {
					font-size: 40rpx;
					font-weight: bold;
					margin-right: 10rpx;
					
					
				}
				image {
					position: relative;
					top: 20rpx;
					width: 60rpx;
					height: 65rpx;
				}
				.sign {
					font-size: 24rpx;
					display: inline-block;
					line-height: 40rpx;
					padding: 0 16rpx;
					border-radius: 20rpx 20rpx 20rpx 0;
					color: #fff;
					background-color: #ff9600;
					margin-left: 5;
					vertical-align: middle;
				}
			}
			.desc {
				margin-left: 20rpx;
				margin-top: 10rpx;
				font-size: 24rpx;
			}
			.data {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				flex: 1;
				justify-content: space-between;
				.item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-flow: column;
					.data_text {
						font-size: 36rpx;
					}
					.item_text {
						font-size: 28rpx;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
	.conentn {
		transform: translateY(-100rpx);
		position: relative;
		z-index: 8;
		.user_desc {
			padding: 40rpx;
			box-sizing: border-box;
			margin: 20rpx 24rpx 0;
			font-size: 28rpx;
			text-indent: 2rem;
			background-color: #fff;
			border-radius: 20rpx;
			line-height: 200%;
		}
		.floor1 {
			.content {
				padding: 0 30rpx;
				.item {
					padding: 40rpx 34rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					.ico {
						width: 80rpx;
						height: 80rpx;
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 50%;
						font-size: 44rpx;
						margin-right: 20rpx;
					}
					.telico {
						background-color: #ff9600;
					}
					.qqico {
						background-color: #51b7ec;
					}
					.wxico {
						background-color: #31c93c;
					}
					.btn {
						padding: 10rpx;
						color: #fff;
						margin-left: 30rpx;
						background-color: #ff9600;
					}
				}
				.qrCode {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-flow: column;
					image {
						width: 208rpx;
						height: 208rpx;
					}
					.text {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
		.floor2 {
			margin-top: 20rpx;
			.content {
				padding: 0 30rpx;
				box-sizing: border-box;
				.nothing {
					padding: 100rpx 0;
					display: flex;
					flex-flow: column;
					justify-content: center;
					color: #ccc;
					align-items: center;
					.ico {
						font-size: 100rpx;
						color: #ccc;
					}
					.text {
						font-size: 28rpx;
						margin-top: 10rpx;
					}
				}
				.text_content {
					margin-top: 30rpx;
					width: 90%;
					font-size: 28rpx;
					border: #eee 2rpx solid;
					background-color: #fafafa;
					height: 160rpx;
					padding: 10rpx;
					margin: 0 auto;
					line-height: 150%;
					-webkit-appearance: none;
					border-radius: 0;
					resize: none;
				}
				.service{
					display: flex;
					align-items: center;
					margin-top: 30rpx;
					padding: 0 30rpx;
				}
				.arrow_region{
					display: flex;
					justify-content: center;
					margin: 40rpx 0 80rpx;
					.button{
						width: 200rpx;
						height: 64rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 30rpx;
					}
				}
			}
		}
		.floor3{
			margin-top: 20rpx;
			.content{
				padding: 0 30rpx;
				box-sizing: border-box;
				.nothing {
					padding: 100rpx 0;
					display: flex;
					flex-flow: column;
					justify-content: center;
					align-items: center;
					color: #ccc;
					.ico {
						font-size: 100rpx;
						color: #ccc;
					}
					.text {
						font-size: 28rpx;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
	
	

	.btn_region {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 9;
		.item {
			display: flex;
			flex-flow: column;
			align-items: center;
			.ico {
				color: #ff589b;
				font-size: 40rpx;
			}
			.text {
				font-size: 24rpx;
			}
		}
		.myBtn {
			display: flex;
			align-items: center;
			color: #fff;
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			justify-content: center;
			border-radius: 40rpx;
			background-color: #ff589b;
		}
	}
}
</style>
